<template>
  <div>
    <YearCalendar v-model='date' :activeDates.sync='activeDates' @toggleDate='toggleDate' lang='zh' :activeClass='activeClass'></YearCalendar>
    <el-dialog :title='title' :visible.sync='dialogVisible' width='50%' class='dia1'>
      <el-table :data='tableData' stripe border>
        <el-table-column prop='work_num' label='编号' align='center'></el-table-column>
        <el-table-column prop='task_start' label='计划开始时间' align='center'></el-table-column>
        <el-table-column prop='task_level' align='center' label='级别'>
          <template slot-scope='scope'>
            <el-tag v-if="scope.row.task_level=='一般'">{{ scope.row.task_level }}</el-tag>
            <el-tag v-if="scope.row.task_level=='重要'" type='success'>{{ scope.row.task_level }}</el-tag>
            <el-tag v-if="scope.row.task_level=='紧急'" type='danger'>{{ scope.row.task_level }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop='status_name' align='center' label='状态'></el-table-column>
        <el-table-column prop='task_type_string' align='center' label='类型'></el-table-column>
        <el-table-column prop='user_name' align='center' label='执行班组/人'></el-table-column>
        <el-table-column align='center' label='详情'>
          <template slot-scope='scope'>
            <el-button type='primary' size='mini' icon='el-icon-zoom-in' @click='handleEdit(scope.$index, scope.row)'></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 详情弹框 -->
      <el-dialog class='dia2' v-dialogDrag :title='detailTitle' :append-to-body='true' center :visible.sync='dialogTableVisible1'>
        <div slot='title' class='header-title'>
          <i class='el-icon-edit' />
          <span class='seeTit'>{{ detailTitle }}</span>
        </div>
        <div>
          <Detail :det-staus='detStaus' :accids='accids' :details-num='detailsNum' />
        </div>
      </el-dialog>
      <span slot='footer' class='dialog-footer'>
        <pagination style='float: right;' v-show='totals>0' :total='totals' :page.sync='currentPage' :limit.sync='PageSize' @pagination='getList' />
        <el-button type='primary' @click='dialogVisible = false'>确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import YearCalendar from '@/components/year-calendar/YearCalendar.vue'
import Detail from './detail.vue'
import { todoAll, todo } from '@/api/todo'

export default {
  components: {
    YearCalendar,
    Detail,
  },
  props: ['date'],
  data() {
    return {
      activeClass: 'actives', // 自定义的class
      activeDates: [], // 选中的日期
      title: '',
      dialogVisible: false,
      tableData: [],
      currentPage: 1,
      totals: 10,
      PageSize: 10,
      detStaus: '',// 传给子组件状态值
      detailsNum: '',// 详情组件里，区分抢修报修与巡检试验
      detailTitle: '详情',
      dialogTableVisible1: false,
      accids: '',
      today: '',

    }
  },
  created() {
    this.getAll()
  },
  methods: {
    toggleDate(dateInfo) {
      console.log(dateInfo)
      this.title = dateInfo.date + '待办事项'
      this.dialogVisible = true
      this.today = dateInfo.date
      this.getList()
    },
    getAll() {
      this.activeDates = []
      todoAll().then(res => {
        res.data.list.forEach(item => {
          let i = { date: item.task_start.substr(0, 10) }
          this.activeDates.push(i)
        })
      })
    },
    //  获取当天代办事项
    getList() {
      let data = {}
      data.limit = this.PageSize
      data.offset = this.currentPage
      data.today = this.today
      todo(data).then(res => {
        this.tableData = res.data.list
        this.totals = res.data.total
      })
    },
    handleSizeChange(val) {
      this.PageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      console.log(`当前页: ${val}`)
      this.getList()
    },
    // 详情
    handleEdit(a, b) {
      this.dialogTableVisible1 = true
      this.accids = b.id
      this.detStaus = b.task_type_string
      if (b.task_type == '抢修' || b.task_type == '报修') {
        this.detailsNum = 1
      } else {
        this.detailsNum = 2
      }
    },
    detailClose(a) {
      this.dialogTableVisible1 = a
    },

  },
}
</script>
<style lang='scss' scoped>
.dialog-footer {
  display: flex;
  justify-content: space-between;
}
</style>
